<script setup lang="ts">
import { reactive, ref, watch, inject, nextTick,defineProps } from "vue";
import { Close, Search } from "@element-plus/icons-vue";
import router from "@/router";
import drawVue from "./draw.vue";
import {} from "@/network/api";
import {} from "@/network/Productapi";
import _ from "lodash";

const NavbarList = ref([]) as any;
const headerLogo = ref() as any;
const direction = ref("ttb");
const Componentsdraw = ref(false);
const input = ref("");
const Searchdraw = ref(false);
const mobileMenuDrawer = ref(false);
const myFn = inject<any>("open");
const translate = inject("translate") as any;

let data = reactive({
  searchIputType: false,
  SolutiondrawType: false,
  drawerType: false,
  textList: {} as any,
  // language: "chinese_simplified",
  languageList: [
    {
      value: "chinese_simplified",
      label: "中文",
    },
    {
      value: "english",
      label: "English",
    },
  ],
});

const props = defineProps({
  language: {
    type: String,
    default: "chinese_simplified",
  },
});


// data.language = sessionStorage.getItem("language") || "chinese_simplified";



const currentRouteName = ref();

const toSearch = () => {
  NavbarList.value.map((res: any) => {
    res.check = false;
  });
  Searchdraw.value = true;
};

watch(
  () => router.currentRoute.value,
  (newValue: any) => {
    NavbarList.value.forEach((item: any) => (item.check = false));
    currentRouteName.value = newValue.name;
  },
  { immediate: true }
);

NavbarList.value = [
  { alias: "Home", id: 0, is_blank: 0, tag: "首页", url: "/Home", check: true },
  {
    alias: "showroom",
    id: 1,
    is_blank: 0,
    tag: "线上展厅",
    url: "/showroom",
    check: false,
  },
  { alias: "demand", id: 2, is_blank: 0, tag: "采购对接", url: "/demand", check: false },
  { alias: "News", id: 3, is_blank: 0, tag: "新闻资讯", url: "/News", check: false },
  {
    alias: "Ecology",
    id: 4,
    is_blank: 0,
    tag: "产业集群",
    url: "/Ecology",
    check: false,
  },
  {
    alias: "About",
    id: 5,
    is_blank: 0,
    tag: "关于我们",
    url: "/about",
    check: false,
  },
];

headerLogo.value = "https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/logo.png";

const toChecked = (item: any) => {
  NavbarList.value.map((i: any) => {
    i.check = false;
  });
  Componentsdraw.value = false;
  Searchdraw.value = false;
  switch (item.alias) {
    // case "experience":
    //   myFn();
    //   break;
    // case "Solutions":
    //   break;
    default:
      router.push({
        path: `${item.url}`,
      });
  }
};

const searchIput = (value: any) => {
  if (data.searchIputType) {
    Searchdraw.value = false;
    input.value = "";
    router.push({
      path: `/searchData`,
      query: {
        keyword: value,
        t: Date.now(),
      },
    });
  }
};

const focus = () => {
  data.searchIputType = true;
};
const blur = () => {
  data.searchIputType = false;
};

const closeEns = () => {
  NavbarList.value.map((res: any) => {
    res.check = false;
  });
};

const toMouseSolution = (item: any) => {
  NavbarList.value.map((res: any) => {
    res.check = false;
  });
  item.check = true;
  data.drawerType = false;
  // if (item.alias === "Solutions") {
  //   data.drawerType = true;
  // }
};

const touch = (item: any) => {
  NavbarList.value.map((res: any) => {
    res.check = false;
  });
  item.check = true;
  data.drawerType = false;
  // if (item.alias === "Solutions") {
  //   data.drawerType = true;
  // }
};

const drawerMouseLeave = (item: any) => {
  item.check = true;
};

const toMouseLeave = (item: any) => {
  item.check = false;
};

const gohome = () => {
  Searchdraw.value = false;
  mobileMenuDrawer.value = false;
  router.push({
    path: "/",
  });
};

const toCloseSolutionDraw = () => {
  data.drawerType = false;
};

const toOpenMenu = () => {
  mobileMenuDrawer.value = true;
};

const toSolution = (item: any) => {
  router.push({
    path: "/Solutions",
    query: {
      id: item.id,
      name: item.name,
      t: Date.now(),
    },
  });
  closeAllDraw();
};

const closeAllDraw = () => {
  data.drawerType = false;
  mobileMenuDrawer.value = false;
  NavbarList.value.map((item: any) => {
    item.check = false;
  });
};

const handleGoFirstUrl = (item: any) => {
  switch (item.alias) {
    // case "experience":
    //   closeAllDraw();
    //   myFn();
    //   break;
    default:
      router.push({
        path: item.url,
      });
      closeAllDraw();
  }
};

const touchDrawer = (item: any) => {
  NavbarList.value.map((res: any) => {
    res.check = false;
  });
  item.check = true;
};

const ddd = () => {
  toCloseSolutionDraw();
};
const emit = defineEmits(["languageChange"]);
const languageAuto = (value: any) => {
  sessionStorage.setItem("language", value);
  emit("languageChange", value);
};
</script>

<template>
  <div class="AllHeader">
    <div class="navBar">
      <el-row align="middle" id="HeaderHed" :gutter="20">
        <el-col
          style="cursor: pointer"
          :lg="8"
          :md="4"
          :sm="6"
          :xs="18"
          @click="gohome"
          id="HeaderHedSlide"
        >
          <div class="logoBox">
            <img
              v-if="language == 'english'"
              src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/logoEnglish.png"
            />
            <img
              v-if="language == 'chinese_simplified'"
              src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/logoChinese.png"
            />
          </div>
        </el-col>

        <el-col
          :lg="2"
          :md="2"
          :sm="2"
          :xs="0"
          v-for="item in NavbarList"
          :key="item.id"
          class="666"
          @click="toChecked(item)"
          @mouseenter="toMouseSolution(item)"
          @mouseleave="toMouseLeave(item)"
          @touchstart="touch(item)"
        >
          <div
            class="pointer"
            :class="
              item.check
                ? 'CheckNavBar'
                : item.alias == currentRouteName
                ? 'CheckNavBar'
                : 'pointer'
            "
          >
            {{ item.tag }}
          </div>
        </el-col>

        <el-col :lg="1" :md="2" :sm="2" :xs="0">
          <div class="searchIcon flex justify_center align_center" @click="toSearch">
            <el-icon><Search color="#202225" /></el-icon>
          </div>
        </el-col>

        <el-col :lg="3" :md="3" :sm="3" :xs="0">
          <div class="selectNo">
            <el-select
              @change="languageAuto"
              v-model="language"
              class="m-2"
              placeholder="Select"
              size="large"
            >
              <el-option
                v-for="item in data.languageList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-col>

        <el-col :lg="0" :md="0" :sm="0" :xs="6">
          <div class="flex justify_center align_center">
            <el-icon :size="24" @click="toSearch"><Search color="#202225" /></el-icon>

            <i class="iconfont icon-caidan operation" @click="toOpenMenu" />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

  <!-- Search抽屉 -->
  <el-drawer
    v-model="Searchdraw"
    :direction="direction"
    :show-close="false"
    size="45%"
    @close="closeEns"
  >
    <template #header>
      <div class="navBar SearchHeader">
        <el-row align="middle" id="HeaderHed" :gutter="20">
          <el-col
            style="cursor: pointer"
            :lg="8"
            :md="4"
            :sm="6"
            :xs="18"
            @click="gohome"
            id="HeaderHedSlide"
          >
            <div class="logoBox">
              <img
                v-if="language == 'english'"
                src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/logoEnglish.png"
              />
              <img
                v-if="language == 'chinese_simplified'"
                src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/logoChinese.png"
              />
            </div>
          </el-col>

          <el-col
            :lg="2"
            :md="2"
            :sm="2"
            :xs="0"
            v-for="item in NavbarList"
            :key="item.id"
            class="666"
            @click="toChecked(item)"
            @mouseenter="toMouseSolution(item)"
            @mouseleave="toMouseLeave(item)"
            @touchstart="touch(item)"
          >
            <div
              class="pointer"
              :class="
                item.check
                  ? 'CheckNavBar'
                  : item.alias == currentRouteName
                  ? 'CheckNavBar'
                  : 'pointer'
              "
            >
              {{ item.tag }}
            </div>
          </el-col>

          <el-col :lg="1" :md="2" :sm="2" :xs="0">
            <div class="searchIcon flex justify_center align_center" @click="toSearch">
              <el-icon><Search color="#202225" /></el-icon>
            </div>
          </el-col>

          <el-col :lg="3" :md="3" :sm="3" :xs="0">
            <el-select
              @change="languageAuto"
              v-model="language"
              class="m-2"
              placeholder="Select"
              size="large"
            >
              <el-option
                v-for="item in data.languageList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>

          <el-col :lg="0" :md="0" :sm="0" :xs="6">
            <i class="iconfont icon-caidan operation" @click="toOpenMenu" />
          </el-col>
        </el-row>
      </div>
    </template>
    <template #default>
      <div class="search-navbar">
        <div class="search-navbar-header">
          <div class="Snh-title">你在找什么？</div>
          <el-icon size="24px" color="#1D1D1F"> </el-icon>
        </div>
        <div class="search-navbar-content">
          <el-input
            v-model="input"
            size="large"
            placeholder="搜索关键字"
            :prefix-icon="Search"
            @change="searchIput"
            @focus="focus"
            @blur="blur"
          >
            <template #append>
              <el-button :icon="Search"></el-button>
            </template>
          </el-input>
        </div>
      </div>
    </template>
  </el-drawer>

  <!-- 手机端菜单 -->
  <el-drawer size="100%" v-model="mobileMenuDrawer" :direction="'rtl'">
    <template #header="{ close, titleId, titleClass }">
      <div class="Menu" @click="gohome">
        <div class="logoBox" style="padding-left: 0">
          <img
            v-if="language == 'english'"
            src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/logoEnglish.png"
          />
          <img
            v-if="language == 'chinese_simplified'"
            src="https://huizhoueii.obs.cn-east-3.myhuaweicloud.com/logoChinese.png"
          />
        </div>
      </div>
    </template>
    <template #default>
      <el-collapse accordion>
        <el-collapse-item
          v-for="item in NavbarList"
          :key="item.id"
          :title="item.tag"
          @click="handleGoFirstUrl(item)"
          class="MobileMenu"
        >
        </el-collapse-item>

        <div class="flex" style="padding: 10px 0px">
          <!-- <el-select
            @change="languageAuto"
            v-model="language"
            class="m-2"
            placeholder="Select"
            size="large"
          >
            <el-option
              v-for="item in data.languageList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
        </div>
      </el-collapse>

      <div class="flex" style="padding: 30px 0px">
        <el-select
          @change="languageAuto"
          v-model="language"
          class="m-2"
          placeholder="Select"
          size="large"
        >
          <el-option
            v-for="item in data.languageList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </template>
  </el-drawer>
</template>

<style lang="scss" > 

.search-navbar-content {
  .el-input__wrapper {
    border-radius: 45px 0 0px 45px !important
  }
}

.el-drawer__header {
  padding-top: 0px !important;
  margin-bottom: 0px !important;
  padding: 0px !important;
  background-color: #f5f8ff !important;
}

.searchIcon {
  width: 42px;
  height: 42px;
  background: #eeeeee;
  border: 1px solid #dddee2;
  border-radius: 21px;
  cursor: pointer;
}
.logoBox {
  display: flex;
  height: 100%;
  max-width: 315px;
  align-items: center;
  .contentText {
    font-weight: bold;
    width: 250px;
  }
  img {
    object-fit: contain;
    width: 100%;
  }
}

.AllHeader {
  width: 100%;
  height: 80px;
  background: #f5f8ff;
}

.el-dropdown__popper.el-popper.dropdown_menu {
  .el-popper__arrow {
    display: none;
  }
}

.solution-navb_45 {
  cursor: pointer;
  color: #1d1d1f !important;
  font-weight: bold;
  margin-bottom: 8px;
}

.SearchHeader {
  padding: 0 !important;
}

.el-dropdown-link {
  font-weight: initial;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 40px;
  border-radius: 20px;
  height: 40px;
  width: 100%;
}

.el-dropdown-link_t {
  background-color: $mainColor;
  color: #fff;
  transition: all 0.2s;
}

.pointer {
  font-weight: initial;
  //一行省略

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.navBar {
  height: 80px;
  width: 1440px;
  margin: 0 auto;
  background-color: #f5f8ff;
  font-weight: bold;
  line-height: 80px;
  font-size: 14px;
  text-align: center;

  .iconfont {
    font-size: 14px;
    padding-left: 2px;
  }

  .el-dropdown {
    padding-top: 20px;
    width: 100%;

    .el-icon {
      top: 2px;
    }
  }

  img {
    display: flex;
  }

  .operation {
    font-size: 24px;
    display: flex;
    margin: 0 auto;
    float: right;
  }

  .search {
    display: flex;
    width: 20px;
    height: 20px;
    float: right;
  }

  .user {
    width: 20px;
    height: 20px;
    display: flex;
    float: right;
  }
}

.custom-tag {
  font-size: 12px;
  background: $mainColor;
  color: #fff;
  border-radius: 5px;
  padding: 0 3px;
  height: 20px;
  line-height: 20px;
  margin-left: 2px;
}

#HeaderHed {
  height: 100%;

  #HeaderHedSlide {
    height: 100%;

    img {
      height: 100%;
      padding: 15px 0;
      object-fit: contain;
    }
  }
}

@keyframes defaultNavbar {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.default-navbar {
  position: relative;

  .solution-navbar {
    animation: defaultNavbar ease-in 0.4s;
    animation-fill-mode: forwards;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    left: 0;
    transition: all 0.4s;

    .solution-navbar-header {
      display: flex;
      justify-content: flex-end;
      margin: 20px 0;
      animation: drawanimation 0.1s ease-in 0.1s backwards;

      .Snh-title {
        font-weight: bold;
        font-size: $secondTitle;
        color: $auxiliaryColor;
      }
    }

    .draw-navbar-header {
      display: flex;
      justify-content: space-between;
      margin: 20px 0;
      animation: drawanimation 0.1s ease-in 0.1s backwards;

      .Snh-title {
        font-weight: bold;
        font-size: $secondTitle;
        color: $auxiliaryColor;
      }
    }

    .solution-navbar-content {
      margin-top: 30px;

      .drawVue {
        transform: translate(0);
        animation: drawanimation 0.2s ease-in 0.2s backwards;
      }

      .Snh-item {
        width: 200px;
        height: 200px;
        margin: 0 20px;
        text-align: center;

        .Snh-item-img {
          width: 100%;
          height: 75%;

          img {
            width: 100%;
            height: 100%;
            border-radius: 20px;
          }
        }

        .Snh-item-title {
          font-size: $demand;
          margin-top: 15px;
          font-weight: bold;
        }
      }
    }
  }
}

@keyframes drawanimation {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.search-navbar {
  margin: 0 auto;
  padding-left: 12%;

  .search-navbar-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    margin-top: 20px;

    .Snh-title {
      font-weight: bold;
      font-size: $secondTitle;
      color: $auxiliaryColor;
    }
  }
}

.CheckNavBar_h {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.CheckNavBar_h:hover {
  color: #fff;
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: 20px;
  background-color: $mainColor;
  transition: background-color 0.4s;
}

.CheckNavBar {
  color: #fff;
  height: 40px;
  width: 100%;
  line-height: 40px;
  border-radius: 20px;
  background-color: $mainColor;
}

.solution_card {
  width: 100%;
  display: flex;
  background: #fafcff;
  padding: 10px;
  border-radius: 10px;

  img {
    width: 24% !important;
    margin-right: 10px;
    object-fit: contain;
  }

  .solution_card_name {
    font-size: 20px;
    color: #172e59;
    // margin: 10px 0 0 5px;
  }

  .solution_card_descr {
    font-size: 15px;
    color: #172e59;
    margin: 10px 0 0 0px;
  }
}

.el-popup-parent--hidden {
  width: 100% !important;
}

.el-drawer {
  transition: 0.2s !important;
}

.el-drawer__body {
  background-color: rgb(245, 245, 247);
  padding: 0;
}

.el-input__wrapper {
  padding: 0px 15px !important;
  border-radius: 45px !important;
}

.el-input--large {
  width: 80% !important;
}

.el-drawer__header > :first-child {
  flex: inherit !important;
}

:deep(.el-drawer__body) {
  overflow: scroll;
}

@media screen and (max-width: 450px) {
  .el-input--large {
  width: 100% !important;
}
  .AllHeader {
    height: 70px !important;
  }

  .logoBox {
    padding-left: 20px;
    img {
      width: 80%;
    }
  }

  .navBar {
    width: 100%;
    // padding: 0 20px;
    height: 70px;
    line-height: 70px;

    .operation {
      float: right;
    }

    .search {
      width: 24px;
      height: 30px;
    }

    .user {
      width: 24px;
      height: 30px;
    }
  }

  .el-drawer__header {
    justify-content: space-between;
    padding: 0 20px !important;
    height: 70px;
    line-height: 70px;

    .Menu {
      height: 100%;
      width: 252px;
      img {
        height: 100%;
        padding: 15px 0;
      }
    }

    img {
      padding: 15px 0;
    }
  }

  .el-drawer__close-btn .el-icon {
    font-size: 30px;
  }

  .el-drawer__body {
    background-color: #fff !important;
    padding: 0 20px 20px 20px;
  }

  .el-collapse-item__content {
    font-size: 24px;
    padding: 0 10px;
    display: flex;
    line-height: 1.5;
    margin-bottom: 10px;

    img {
      width: 100%;
      height: 90px;
      object-fit: cover;
      border-radius: 15px;
    }
  }

  .el-collapse-item__header {
    font-size: 18px;
    border-bottom: 0;
    font-weight: bold;
  }

  .el-collapse-item__wrap {
    border-bottom: 0;
  }

  .mobileName {
    font-size: 20px;
    text-align: center;
  }

  .secMobileName {
    margin-bottom: 20px;
    line-height: 3;
  }

  .MobileMenu {
    font-size: 18px !important;
  }
}

@media screen and (min-width: 500px) {
  .navBar {
    width: 100%;
  }

  .el-drawer__header {
    justify-content: space-between;
  }

  .el-drawer__close-btn .el-icon {
    font-size: 30px;
  }

  .el-collapse-item__content {
    font-size: 24px;
    padding: 0 10px;
    display: flex;
    line-height: 1.5;
    margin-bottom: 10px;

    img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      border-radius: 15px;
    }
  }
  
}

@media screen and (min-width: 992px) {
  .navBar {
    width: 1000px;
  }

  .solution-navbar {
    width: 1000px;
  }

  .search-navbar {
    width: 1000px;
  }

}

@media screen and (min-width: 1200px) {
  .navBar {
    width: 1200px;
  }

  .solution-navbar {
    width: 1200px;
  }

  .search-navbar {
    width: 1200px;
  }
}

@media screen and (min-width: 1440px) {
  .navBar {
    width: 1440px;
  }

  .solution-navbar {
    width: 1440px;
  }

  .search-navbar {
    width: 1440px;
  }
}

@media screen and (max-width: 768px) {
  .search-navbar {
    padding-left: 0;
  }
  .el-input--large {
    width: 100%;
  }
}
</style>
